<template>
    <!-- 搜索要卖的手机或者机型 -->
    <div class="search">
        <!-- 按钮 -->
        <div class="search-wrapper" v-show="which" @click="gotoNext">
            <i class="icon iconfont icon-search"></i>
            <span class="search-text">{{text}}</span>
        </div>
        <!-- 搜索框 -->
        <div class="search-wrapper search-btn"  v-show="!which">
            <i class="icon iconfont icon-search"></i>
            <input class="search-inp" type="text" :placeholder="text" ref="input" @keyup="getSearchData">
            <span class="icon iconfont icon-close" @click="clearInput"></span>
            <div class="cancel" @click="gotoBrand">取消</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            which: true,    //true:显示按钮，false:显示输入框
            flag: true,     //input输入框，是否可以请求数据
            data: [],       //请求到的总数据
        }
    },
    mounted (){
        var getPath = this.$route.path
        // console.log(this.$route.path)
        if(getPath == '/hschoice'){
            this.which = true
        }else if(getPath = '/hschoice/search'){
            this.which = false
        }
    },
    props: {
        text: {    //提示文字
            type: String,
            default: '查找您手机的品牌、机型'
        },
        url: {    //跳转到哪一个页面
            type: String,
            default: '/hschoice/search'
        },
        backUrl: {    //返回哪一个页面
            type: String,
            default: '/hschoice'
        },
    },
    created() {
        this.getData()  //请求到的总数据
    },
    methods: {
        //去搜索页面
        gotoNext(){
            // this.which = false
            //跳转到搜索页面
            this.$router.push({ path: this.url })
            //获取path
            // this.getUrl()
        },
        //跳回选择品牌型号页面
        gotoBrand(){
            // this.which = true
            //跳转到搜索页面
            // this.$router.push({ path: this.backUrl })
            this.$router.go(-1)
            //获取path
            // this.getUrl()
        },
        //点击清空input输入框
        clearInput() {
            this.$refs.input.value=""
        },
        //在输入框输入内容，获取数据
        getSearchData(e) {
            var _this = this
            _this.flag = true
            setTimeout(()=>{
                if(_this.flag){
                    //获取input数据,转化为小写
                    var userInput = e.target.value
                    //如果用户输入0，不发送请求
                    if(userInput == 0) return
                    //回来大小写的正则匹配
                    var reg = new RegExp(userInput,'i');
                    //创建空数组
                    var arr = []
                    _this.data.forEach((item,index) => {
                        var res = item.brand.search(reg)
                        //如果当前字符串匹配整个品牌
                        if(res == 0){
                            item.data.forEach((child,i) => {
                                arr.push(child)
                            })
                        }else {
                            item.data.forEach((child,i) => {
                                if(child.model.search(reg)==0){
                                    arr.push(child)
                                }
                            })
                        }
                    })
                    if(arr.length){
                        //向父元素发送事件
                        _this.$emit('get-search', arr)
                    }
                    
                }
                _this.flag = false
            },500)
        },
        //获取型号
        async getData(){
            try {
                var result = await this.$ajax.get('/model')
                if(result.status == 200) {
                    this.data = result.data
                    // console.log(this.data)
                }
            } catch(err) {
                this.data = []
            }
        },
    },
    watch:{
        //监视哈希值变化，修改搜索框样式
        $route(to, from){
            if(to.path == this.url){
                this.which = false
            }else {
                this.which = true
            }
        }
    },
}
</script>
<style  lang="less" scoped>
    @import "../../common/less/variable.less";

    //搜索框
    .search{
        width:100%;
        padding:10px 10px 10px;
        box-sizing:border-box;
        border-bottom:1px solid @color-alert-line;
        background:#fff;
        .search-wrapper{
            width:100%;
            height:30px;
            line-height:30px;
            background:@color-gray-bg;
            border-radius:5px;
            color:#999;
            text-align:center;
            i{
                vertical-align:middle;
                line-height:inherit;
                font-weight:100;
                color:#ccc;
            }
            .search-text{
                font-size:12px;
                line-height:inherit;
                letter-spacing:1px;
            }
            &.search-btn{
                text-align:left;
                display:flex;
                position:relative;
                i{
                    left:5px;
                    flex:0 0 25px;
                    text-align:right;
                }
                .search-inp{
                    outline:none;
                    font-size:12px;
                    text-indent:5px;
                    height:100%;
                    width:100%;
                    background:0;
                    flex:1;
                }
                span{
                    text-align:center;
                    border-radius:@border-alert-radius;
                    background:@color-gray-bg;
                    width:30px;
                    position:absolute;
                    right:35px;
                    top:0;
                }
                .cancel{
                    flex:0 0 45px;
                    font-size:14px;
                    color:@color-red;
                    text-align:right;
                    background:#fff;
                }
            }
        }
        
    }
</style>
